<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>eiptable sample</title>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.9.14/dist/css/layui.css">
<link rel="stylesheet" href="./eiptable/eipTable.css">

<style>
body{padding:100px 0;}
</style>
</head>
<body>
	<div style="padding: 16px;"> 
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>

<script type="text/html" id="toolBar" class="layui-btn-container">
	<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
	<button class="layui-btn layui-btn-sm" lay-event="add">增加记录</button>
</script>
<script type="text/html" id="operateDom">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>     
<style>
	.layui-table-view td[data-edit-ext]{background-color:#e2ffff52;}
</style>
	
<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<script src="https://unpkg.com/layui@2.9.14/dist/layui.js"></script>
<script>
layui.config({
    base:'./eiptable/'
}).use(['eipTable'], function(){
	var eipTable = layui.eipTable;
	var $ = layui.jquery;
	
	const testData = [
		{employeeNo: '0001', name: '张三', sex: '1', yearMonth: '2024-01', checkInDate: '2023-01-01', checkOutDate: '2023-12-02'},
		{employeeNo: '0002', name: '李四', sex: '2', yearMonth: '2024-02', checkInDate: '2024-01-01', checkOutDate: '2022-11-02'},
		{employeeNo: '0003', name: '王五', sex: '1', yearMonth: '2024-03', checkInDate: '2023-01-01', checkOutDate: '2024-01-02'},
		{employeeNo: '0004', name: '麻子1', sex: '2', yearMonth: '2024-04', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
	];
	const addData = [
		{employeeNo: '0005', name: '麻子2', sex: '2', yearMonth: '2024-05', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子3', sex: '2', yearMonth: '2024-06', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子4', sex: '2', yearMonth: '2024-07', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子5', sex: '9', yearMonth: '2024-08', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子6', sex: '2', yearMonth: '2024-09', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子7', sex: '9', yearMonth: '2024-10', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子8', sex: '2', yearMonth: '2024-11', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
		{employeeNo: '0004', name: '麻子9', sex: '9', yearMonth: '2024-12', checkInDate: '2023-01-30', checkOutDate: '2023-01-10'},
	];

    // 渲染表格
	eipTable.render({
		elem: '#test',
        defaultToolbar: ['filter'],
        toolbar: '#toolBar',
		cols: [[
            {type:'numbers', fixed: 'left', width:50},
            {field:'employeeNo', fixed: 'left', width:80, title: '工号'},
            {field:'name', fixed: 'left', width:100, title: '姓名', edit: 'text'},
            {field:'sex', fixed: 'left', width:80, title: '性别', 
				edit: {
					type: 'select', 
					options: [{value: '1', text: '男'}, {value: '2', text: '女'}, {value: '9', text: '保密'}]
				}
			},
			{field:'yearMonth', width:110, title: '入职时间',
				edit: {
					type: 'date',
					options: {type: 'month', format: 'yyyy-MM'}
				}
			},
			{field:'checkInDate', width:110, title: '入项时间', edit: 'date'},
			{field:'checkOutDate', width:110, title: '离项时间', edit: 'date'},
			{field:'workload', width:110, title: '工作量',
				edit: {
					type: 'number',
					options: {min: 0, max: 30, precision: 2}
				}
			},
			{width: 70, minWidth: 70, toolbar: '#operateDom'}
		]],
		page: true,
	    limits: [5, 10, 30],
	    limit: 5,
		data: testData,
    });

	// 绑定toolbar事件
    eipTable.on('toolbar(test)', function(obj) {
        switch(obj.event){
            case 'refresh':
				refresh();
                break;
			case 'add':
				add();
				break;
        };
        return false;
    });
	// 绑定单元格编辑事件
	eipTable.on('edit(test)', function(obj){
		console.log(obj);
	});
    // 绑定表格单元格工具事件
    eipTable.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
			obj.del();
        }
    });

	// 刷新表格
	function refresh(){
		eipTable.reloadData('test', {
			data: testData
		});
	}
	// 增加表格数据
	function add(){
		let rows = eipTable.cache['test'];
		rows.push(...addData);
		//eipTable.renderData('test');
		eipTable.reloadData('test', {
			data: rows
		});
	}
});
</script>
</body>
</html>
